import React from 'react';
import { Card, Typography, Tag } from 'antd';
import useStore from '@/store';

const { Text, Title } = Typography;

const DebugPanel: React.FC = () => {
  const { chatSession } = useStore();
  
  return (
    <Card 
      title="调试面板" 
      size="small" 
      style={{ 
        position: 'fixed', 
        top: 10, 
        right: 10, 
        width: 300, 
        zIndex: 9999,
        backgroundColor: 'rgba(255,255,255,0.95)',
        fontSize: '12px'
      }}
    >
      <div className="space-y-2">
        <div>
          <Text strong>会话ID: </Text>
          <Text code>{chatSession.sessionId || '无'}</Text>
        </div>
        
        <div>
          <Text strong>消息数量: </Text>
          <Tag color="blue">{chatSession.chatList?.length || 0}</Tag>
        </div>
        
        <div>
          <Title level={5} style={{ margin: '8px 0 4px 0' }}>消息列表:</Title>
          <div className="max-h-32 overflow-y-auto space-y-1">
            {(chatSession.chatList || []).map((msg: any, index: number) => (
              <div key={msg.id || index} className="text-xs p-1 border rounded">
                <div>
                  <Tag color={msg.role === 'user' ? 'green' : 'blue'}>
                    {msg.role}
                  </Tag>
                  {msg.isStreaming && <Tag color="orange">流式中</Tag>}
                </div>
                <div className="mt-1">
                  <Text style={{ fontSize: '10px' }}>
                    ID: {String(msg.id).substring(0, 8)}...
                  </Text>
                </div>
                <div>
                  <Text style={{ fontSize: '10px' }}>
                    内容长度: {msg.content?.length || 0}
                  </Text>
                </div>
                {msg.content && (
                  <div className="mt-1">
                    <Text style={{ fontSize: '10px' }} type="secondary">
                      {msg.content.substring(0, 50)}...
                    </Text>
                  </div>
                )}
              </div>
            ))}
          </div>
        </div>
      </div>
    </Card>
  );
};

export default DebugPanel; 